<template>
  <div>
    <h3>优惠券增加</h3>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td >优惠类型</td>
          <td>
            <select v-model="state.Type">
              <option value="">请选择</option>
              <option :value="1">代金券</option>
              <option :value="2">折扣券</option>
              <option :value="3">兑换券</option>
            </select>
          </td>
        </tr>
        <tr>
          <td >优惠标题</td>
          <td><input type="text" v-model="state.Titel" /></td>
        </tr>
        <tr>
          <td >优惠颜色</td>
          <td><input type="color" v-model="state.Color" /></td>
        </tr>
        <tr>
          <td >数量</td>
          <td><input type="text" v-model="state.Count" /></td>
        </tr>
        <tr>
          <td >限领</td>
          <td>
            <input type="text" disabled v-model="state.Number" />
          </td>
        </tr>
        <tr>
          <td >使用条件</td>
          <td><input type="text" v-model="state.Money" /></td>
        </tr>
        <!-- 有条件显示 代金券时候显示 -->
        <tr v-if="state.Type == 1">
          <td >减免金额</td>
          <td><input type="text" v-model="state.ReleaseMoney" /></td>
        </tr>
        <!-- 有条件  折扣券的时候显示-->
        <tr v-if="state.Type == 2">
          <td >折扣</td>
          <td><input type="text" v-model="state.ZheKou" /></td>
        </tr>
        <tr>
          <td >开始时间</td>
          <td><input type="date" v-model="state.BeginTime" /></td>
        </tr>
        <tr>
          <td >结束时间</td>
          <td><input type="date" v-model="state.EenTime" /></td>
        </tr>
        <tr>
          <td >适用门店</td>
          <td>
            <select v-model="state.ShopId">
              <option :value="0">全部</option>
              <option :value="item.Id" v-for="item in data.list"> {{ item.ShopName }}  </option>
               
            
            </select>
          </td>
        </tr>
        <tr>
          <td></td>
          <td><input type="button" value="添加" @click="ok" class="btn btn-success" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';



//创建一个路由器，实现页面跳转并且传参
const router = useRouter();
//创建路由信息对象，用来接受参数
const route = useRoute();

//声明后端需要的参数
let queryInfo = reactive({
  ShopName:'',
  Index:1,
  Size:1000000000,
});

//存储后端返回的数据
let data: any = reactive({
  list: [], //列表
  count: 0, //总条数
  page: 0, //总页数
});

//优惠券增加时向后端传递的数据
let state: any = reactive({
  ShopId: 0, //全部门店
  Type: '',
  Titel: '',
  BeginTime: '',
  EenTime: '',
  Color: '#ff0000',
  Count: '',
  Money: '',
  Number: 1,
  ReleaseMoney: 0,
  ZheKou: 10,
});

onMounted(() => {
  getList();
});

//获取门店列表
const getList = () => {
  axios({
      url: "https://localhost:7244/api/DisCount/DisCountList",
    method: 'get',
    params: queryInfo,
  })
    .then((res) => {
      console.log(res);
      data.list = res.data.list;
      data.totalCount = res.data.totalCount;
      data.totalPage = res.data.totalPage;
    })
    .catch((err) => {
      console.log(err);
    });
};

//增加优惠券
const ok = () => {
  
  //2.发送网络请求

  axios({
    url: 'https://localhost:7244/api/DisCount/DisCountAdd',
    method: 'post',
    data: state,
  })
    .then((res) => {
      console.log(res);
      if (res.data>0) {
        alert('添加成功');
        router.push('/DisCountList'); 
    
      } else  {
          alert('添加失败');
        return;
      } 
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>